Ext.require(['Ext.data.*', 'Ext.grid.*', 'Ext.tip.*']);

SexStore = new Ext.data.SimpleStore({
			fields : ['sexid', 'sexname'],
			data : [['男', '男'], ['女', '女']]
		});

var rendersex = function(value)
{
	if (value == "女")
	{
		return "<span style='text-align:center;color:red'>" + value + "</span>";
	} else
	{
		return "<span style='text-align:center;color:green'>" + value
				+ "</span>";
	}
};

var gridpanel = Ext.create('Ext.grid.Panel', {
	store : UserStore,
	layout:'fit',
	id : 'list',
	stripeRows : true,// 斑马线效果
	forceFit : true, // 列表宽度自适应
	selModel : Ext.create('Ext.selection.CheckboxModel'), // 每行前面加一个勾选框
	columns : [{// 行号
		// text: '',
		text : '序号',
		width : 60,
		xtype : 'rownumberer',
		align : 'center',
		sortable : false
	}, {
		text : '员工姓名',
		dataIndex : 'user_name',
		align : 'center',
		editor : {
			allowBlank : false,
			maxLength: 6, 
			blankText : '不能为空',
			emptyText : '请填写员工姓名'
			//regexText : '只能输入汉字，请输入真实姓名！',
			//regex : /^[\u4E00-\u9FA5]+$/
		}
	}, {
		text : '员工编号',
		dataIndex : 'user_number',
		align : 'center',
		editor : {
			maxLength: 30, 
			allowBlank : false,
			blankText : '不能为空'
		}
	}, {
		text : '性别',
		dataIndex : 'user_sex',
		align : 'center',
		renderer : rendersex,
		field : {
			xtype : 'combobox',
			// forceSelection: true,//必须选择一个选项
			typeAhead : true,
			triggerAction : 'all',
			queryMode : 'local',
			selectOnTab : true,
			store : SexStore,
			lazyRender : true,
			displayField : 'sexname',
			valueField : 'sexid',
			listeners : {
				select : function(combo, record, index)
				{
					isEdit = true;
				}
			}
		}
		}, {
		text : '生日',
		dataIndex : 'user_birthday',
		align : 'center',
		xtype : 'datecolumn',
		format : 'Y-m-d',
		field : {
			xtype : "datefield",
			format : "y-m-d",
			altFormats : 'Y-m-d'
		},
		renderer : new Ext.util.Format.dateRenderer('Y-m-d')
	}, {
		text : '员工电话',
		dataIndex : 'user_phone',
		align : 'center',
		editor : {
			allowBlank : false,
			regex : /^1\d{10}$/, // 正则表达式在/...../之间
			regexText : "请输入正确的手机号码!" // 正则表达式错误提示
		}
	}, {
		text : '邮箱',
		dataIndex : 'user_email',
		align : 'center',
		editor : {
			allowBlank : true,
			regex : /^([a-zA-Z0-9_\.\-])+\@(([a-zA-Z0-9\-])+\.)+([a-zA-Z0-9]{2,4})+$/,
			regexText : "请填写正确的邮箱"
		}
	}, {
		text : '入职时间',
		dataIndex : 'user_intime',
		align : 'center',
		xtype : 'datecolumn',
		format : 'Y-m-d',
		field : {
			xtype : "datefield",
			format : "Y-m-d"
		},
        renderer: function(value) {
            //return value.format("Y-m-d");
            return Ext.util.Format.date(value, 'Y-m-d');
        }
	}, {
		text : '密码',
		dataIndex : 'user_password',
		align : 'center',
		editor : {
			maxLength: 10,
	    	minLength: 3,
			inputType: 'password',    //密码
			allowBlank : false
		},
		renderer : function(value, metadata, record)
		{
			return "**"
		}
	}, {
		text : '工位',
		dataIndex : 'fk_station_pk',
		align : 'center',
		editor : {
			maxLength: 10,
			allowBlank : true
		}
		
	}, {
		text : '员工职位',
		dataIndex : 'fk_roles_pk',
		align : 'center',
		field : {
			xtype : 'combobox',
			typeAhead : true,
			triggerAction : 'all',
			queryMode : 'local',
			selectOnTab : true,
			store : RolesStore,
			lazyRender : true,
			displayField : 'roles_name',
			valueField : 'roles_pk'
		},
		renderer : function(value, metadata, record)
		{
			var index = RolesStore.find('roles_pk', value);
			if (index != -1)
			{
				return RolesStore.getAt(index).data.roles_name;
			}
			return value;
		}
	}],
	bbar : new Ext.PagingToolbar({
				xtype : 'paging',
				height : '30',
				store : 'UserStore', // 主要是取store中从后台返回的totalCount，以及在store中设置的pagesize，就可以进行分页。具体的数据分页在后台的sql语句中进行。
										// store中的load函数中的pagesize设置数据显示的实际条数。
				displayMsg : '{0}--{1},共{2}条记录',
				emptyMsg : '没有记录',
				displayInfo : true,
				beforePageText : '第',
				afterPageText : '页，共{0}页',
				firstText : '首页',
				laseText : '末页',
				nextText : '下页',
				prevText : '上页'

			})
});


var formaction = new Ext.form.FormPanel({
	id : 'formconditions',
	height : 130,
	items : [{
				xtype : 'fieldset',
				id : 'fieldset1',
				title : '<style="height:20; width:20;">查询条件',
				height : 80,
				layout : "vbox",
				items : [{
							xtype : 'container',
							height : 30,
							layout : 'hbox',
							layoutConfig : {
								align : 'middle'
							},
							items : [{
										xtype : 'label',
										width : 80,
										text : '员工姓名',
										style : 'text-align:center;margin-left:10px;'
									}, {
										xtype : 'textfield',
										emptyText : '请输入员工姓名',
										submitValue : true,
										name : 'user_name'
									}, {
										xtype : 'label',
										width : 80,
										text : '员工编号',
										style : 'text-align:center;margin-left:10px;'
									}, {
										xtype : 'textfield',
										emptyText : '请输入员工编号',
										submitValue : true,
										name : 'user_number'
									}, {
										xtype : 'label',
										width : 80,
										text : '员工职位',
										style : 'text-align:center;margin-left:10px;'
									}, {
										xtype : 'textfield',
										emptyText : '请输入职位',
										submitValue : true,
										name : 'fk_roles_pk'
									}, {
										xtype : 'label',
										width : 80,
										text : '员工电话',
										style : 'text-align:center;margin-left:10px;'
									}, {
										xtype : 'textfield',
										emptyText : '请输入电话',
										submitValue : true,
										name : 'user_phone'
									}]
						}
				]
			}, {
				xtype : 'container',
				height : 50,
				layout : 'column',
				items : [{
							xtype : 'button',
							width : 100,
							height : 30,
							text : '查询',
							id:'bt_se',
							//hidden : 'se',
							icon : "../../../../Images/btnimg/select.png",
							handler : 'select',
							scope : this
						}, {
							xtype : 'button',
							id:'add',
							width : 100,
							height : 30,
							text : '添加',
							id:'bt_ad',
							//hidden : ad,
							style : 'margin-left:25px;',
							icon : "../../../../Images/btnimg/add.png",
							handler : 'add',
							scope : this
						},
						{
							xtype : 'button',
							width : 100,
							height : 30,
							text : '删除',
							id:'bt_de',
							//hidden : de,
							style : 'margin-left:25px;',
							icon : "../../../../Images/btnimg/delete.png",
							handler : 'del',
							scope : this
						}, {
							xtype : 'button',
							width : 100,
							height : 30,
							text : '重置',
							id:'bt_re',
							//hidden : re,
							style : 'margin-left:25px;',
							icon : "../../../../Images/btnimg/refresh.png",
							handler : 'reset_click',
							scope : this
						}
				]
			}]
});

//创建panel
var panel = new Ext.Panel({
			// title : '员工信息管理',
			id : 'panel',
			autoHeight : true,
			aoutWidth : true,
			items : [formaction, gridpanel]
});

// 初始化界面
Ext.onReady(function()
{
	panel.render(Ext.getBody());
	//调整窗口的高度
	Ext.getCmp('list').setHeight(document.documentElement.clientHeight-130);//动态设置窗口的大小
	Ext.getCmp('list').getStore().reload();
});

// 界面大小动态调整
Ext.EventManager.onWindowResize(function()
	{
		fillBrowser(panel);
	});

function fillBrowser(obj)
{
	if (obj != null)
	{
		obj.setWidth(document.body.clientWidth);
		obj.setHeight(document.body.clientHeight);
	}
}

